<script setup lang="ts">
import { RouterView } from 'vue-router'
import { onMounted } from 'vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'

const appStore = useAppStore()
const userStore = useUserStore()

/**
 * 应用初始化
 */
onMounted(() => {
  // 初始化应用状态
  appStore.initializeApp()
  
  // 初始化用户状态
  userStore.initializeFromStorage()
  
  // 检测设备类型
  appStore.detectDevice()
  
  // 监听窗口大小变化
  window.addEventListener('resize', appStore.handleResize)
  
  // 监听在线状态变化
  window.addEventListener('online', appStore.handleOnlineStatusChange)
  window.addEventListener('offline', appStore.handleOnlineStatusChange)
})
</script>

<template>
  <div id="app" :class="{ 'dark': appStore.isDarkMode }">
    <RouterView />
  </div>
</template>

